<!-- System Setting -->
<!-- Author: Edwin -->
<template>
  <div class='system-setting'>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple system-setting-left">
          <div class="system-setting-left-title">
            <div class="system-setting-left-title-area">
              <i class="el-icon-setting"></i>
            </div>
           <b> {{ `${$t('custom.sys.systemConfiguration')}` }} </b>
          </div>
          <div class="system-setting-left-list">
            <NavMenu :defaultActiveMenuItem='ActiveMenuItem'
                     @changeMenuActive="changeMenuActive" />
          </div>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple system-setting-right">
          <div class='api-authorization-css'>
            <div class="card">
               <div class="card-right-img">
                  <img src="~@/assets/mspbots/right_view.png">
                </div>
              <div class="card-title">{{ mainTitle }}
              </div>
              <div class="card-content">
                <div class="card-content-list">
                  <ConnectorConfig v-if="ActiveMenuItem === 'connector-config'" />
                  <Attendance v-if="ActiveMenuItem === 'attendance'" />
                  <NextTicket v-if="ActiveMenuItem === 'next-ticket'" />
                  <!-- <Accounting  v-if="ActiveMenuItem==='accounting'"/> -->
                  <TempAccounting  v-if="ActiveMenuItem==='accounting'"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NavMenu from './nav-menu'
import ConnectorConfig from '../Integrations'
import Attendance from './modules/attendance'
import NextTicket from './modules/nextTicket'
import Accounting from './modules/accounting'
import TempAccounting from './temp/tempAccounting'

export default {
  components: { NavMenu, ConnectorConfig, Attendance, NextTicket, Accounting, TempAccounting },
  data () {
    return {
      ActiveMenuItem: ''
    }
  },
  computed: {
    mainTitle () {
      switch (this.ActiveMenuItem) {
        case 'attendance':
          return this.$t('custom.sys.attendance')
        case 'next-ticket':
          return this.$t('custom.sys.nextTicket')
        case 'connector-config':
          return this.$t('custom.sys.connectorConfig')
        case 'accounting':
          return this.$t('custom.sys.accounting')
        default:
          return this.$t('custom.sys.connectorConfig')
      }
    }
  },
  created () {
    this.changeMenuActive('connector-config')
  },
  methods: {
    changeMenuActive (e) {
      this.ActiveMenuItem = e
    }
  }
}
</script>

<style scoped lang="scss">
@import "./system-setting.scss";
</style>
